<template>
  <div class="interface">
    <div class="c">
      <el-button class="d" @click="turn">返回</el-button>
    </div>
    <div class="box">
      <div style="text-align: center">
        <h1>管理界面登录</h1>
      </div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        style="text-align: center;"
      >
        <el-form-item prop="username">
          <span class="e">手机号:</span>
          <input class="a"
            type="text"
            v-model="loginForm.username" />
        </el-form-item>

        <el-form-item prop="password">
          <span class="e">密码:</span>
          <input class="a"
            type="password"
            v-model="loginForm.password" />
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="loginForm.radio">
            <el-radio label="1" key="1">管理员登录</el-radio>
            <el-radio label="2" key="2">审核员登录</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="f">
          <el-button class="b" type="primary" @click="login">登录</el-button>
          <el-button class="b" type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
        radio: '1',
      },
      loginFormRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        radio: [{ required: true, message: "请选择登录人员",trigger:"blur" }],
      },
    };
  },
  methods: {
    //重置登录表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    //预验证
    login() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        if (this.loginForm.radio == 1) this.$router.push("/talentM");
        if (this.loginForm.radio == 2) this.$router.push("/verify");
      });
    },
    back() {
      this.$router.push("/choose");
    },
    turn () {
      this.$router.push('/Choose')
    }
  },
};
</script>


<style Lang="less" scoped>
.interface {
 margin: 0;
 padding: 0;
 height: 100%;
 width: 100%;
 border-radius: 20px;
 background-image: url(../assets/1.jpg);
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: 0px -50px;
}
.box {
 width: 450px;
 height: 500px;
 padding: 40px;
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 40px;
 transform: translate(-50%,-50%);
 background-color: #00000068;
 text-align: left;
 border-style: ridge;
}
.danger {
  margin: 20px;
}
h1 {
 color: #FFFFFF;
 text-transform: uppercase;
 font-size: 60px;
 /* 粗细 */
 font-weight: 400;
 margin-bottom: 80px;
}
.a {
  width: 180px;
  border: 0;
  background: none;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 20px;
  text-align: center;
  border: 2px solid #c8d6e5;
  padding: 14px 10px;
  outline: none;
  color: #ffffff;
  border-radius: 24px;
  transition: 0.25s;
  margin-left: 40px;
}
.a:focus{
 width: 220px;
 border-color: #FFFFFF;
}
.b {
 border: 0;
 font-size: 17px;
 background: none;
 display: inline-block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #FFFFFF;
 padding: 14px 40px;
 outline: none;
 color: #ffffff;
 border-radius: 24px;
 transition: 0.25s;
 cursor: pointer;
 width: 110px;
 margin-left: 30px;
}
.b:hover {
 background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
 font-size: x-large;
}
.c {
  position: relative;
  text-align: right;
}
.d {
  margin-top: 30px;
  margin-right: 50px;
  font-size: 18px;
  color: #8ec5fc;
  background: none;
}
.e {
  font-size: 20px;
  color: white;
}
.f {
  text-align: right;
}

</style>